<template>
  <div class="page">
    <div class="form-style">
      <el-menu v-model="index" style="display: flex; flex-direction: row; align-items: center; justify-content: space-around;">
        <el-menu-item index="1"><span>密码登陆</span></el-menu-item>
        <el-menu-item index="2"><span>短信登陆</span></el-menu-item>
      </el-menu>
      <el-form>
        <div v-if="index === 1">
          <el-form-item>
            <el-input type="text" placeholder="账号/手机号/邮箱" v-model="loginDto.username"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="password" placeholder="密码" v-model="loginDto.password"></el-input>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item>
            <el-input type="text" placeholder="请输入手机号" v-model="loginDto.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="number" placeholder="请输入验证码" v-model="loginDto.checkCode"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <el-button>登录</el-button>
<!--      <div class="img-container">-->
<!--        <img src="weixin-logo.png" alt="qq"/>-->
<!--        <img src="weixin-logo.png" alt="weixin"/>-->
<!--      </div>-->
    </div>

<!--    竖杠-->
    <div style="border-left: black solid 2px;width: 0;height: 70%"></div>

<!--右侧二维码-->
    <div>
      <QR qrUrl="qr-test.png" todo="微信扫码登录" actionHtml="<p>打开 <span>微信app</span> 扫码以登录！"/>
    </div>

  </div>
</template>
<script>
import QR from '@/components/QR.vue'
export default {
  data() {
    return {
      index: '',
      loginDto: {
        username: '',
        password: '',
        phone: Number,
        checkCode: Number
      },
      actionHtml: ''
    };
  },
  components:{
    QR
  }
};
</script>
<style>
.page{
  width: 55%;
  height: 40%;
  padding: 50px;
  background: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: space-around;
  border-radius: 10px;
  justify-content: space-around; /* 或 justify-content: space-between */
}
.form-style{
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  padding: 25px;
  //border: black solid 1px
}
.form-style span{
  color: rebeccapurple;
  font-weight: bolder;
  font-size: x-large;
}
.img-container{
  height: 20px;
  display: flex;
  justify-content: space-around;
  margin-left: 10px;
}
.img-container img{
  height: 20px;
}
</style>